<template>
    <el-table :data="filterTableData.slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)" style="width: 100%">

        <el-table-column prop="title" label="楼盘名称" />
        <el-table-column prop="type" label="房源类型" />
        <el-table-column prop="num" label="门牌号" />
        <el-table-column prop="hometype" label="房源户型" />
        <el-table-column prop="name" label="户主" />
        <!-- 添加输入框 -->
        <el-table-column align="right">
            <template #header>
                <el-input v-model="search" size="small" placeholder="搜索" />
            </template>
        </el-table-column>
        <!-- 添加删除和修改按钮 -->
        <el-table-column>
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!-- 设置导航 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="filterTableData.length"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />
    <!-- 弹窗组件 -->
    <UpdateDialo @getList="getTableList"></UpdateDialo>
</template>
<script lang="ts" setup>
import { ref, computed, onMounted } from "vue"
// 引入封装好的请求
import link from "../../api/apis";
// 引用useStore
import { useStore } from "vuex";
import UpdateDialo from "../../components/UpdateDialog.vue";
import { ElMessage, ElMessageBox } from 'element-plus'
// 得到store对象
const store = useStore();
// 设置需要的参数与方法
const currentPage4 = ref(1)
const pageSize4 = ref(10)
const search = ref('')

//表格数据
const userList = ref([])
//获取住户信息
const getTableList = () => {
    link('/userlist').then((res) => {
        console.log(res);
        if (res.data.length) {
            //   console.log('信息获取成功 ');
            ElMessage({
                message: '信息获取成功！',
                type: 'success',
            })
            userList.value = res.data

        } else {
            ElMessage({
                message: '信息获取失败！',
                type: 'error',
            })
            //   console.log('信息获取失败！ ');
        }
    })
}
onMounted(() => {
    getTableList()
})
// 使用计算属性处理数据
const filterTableData = computed(() => {
    return userList.value.filter((item: any) => item.name.toLowerCase().includes(search.value.toLowerCase()))
})
const handleSizeChange = (val: number) => {
    //一页显示多少条
    pageSize4.value = val;
}
const handleCurrentChange = (val: number) => {
    //页码更改方法
    currentPage4.value = val;
}
// 添加删除和修改按钮方法与接口
interface User {
    id: number,
    title: string,
    type: string,
    num: string,
    hometype: string,
    name: string
}
// 将缓存的权限赋值给power变量
const power=JSON.parse(store.state.homeview.token).power

//编辑信息
const handleEdit = (row: any) => {
    if (power.includes('住户信息修改') || power.includes('所有权限')) {
        console.log(row)
        // 点击更改弹出框状态
        store.commit('SET_DIALOG')
        // 编辑框信息
        store.commit('showEdit', row)
    }else{
        ElMessage({
            type: 'error',
            message: '您没有住户信息修改权限！！！',
        })
        return
    }

}

//删除信息
const handleDelete = (row: User) => {
    if (power.includes('住户信息修改') || power.includes('所有权限')){
        ElMessageBox.confirm(
        '确认删除该信息吗?',
        '您正在进行删除操作',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // console.log('id',row.id);
            link(`/userlist/${row.id}`, 'delete').then(res => {
                if (res.status === 200) {
                    ElMessage({
                        type: 'success',
                        message: '删除成功！',
                    })
                    getTableList()
                } else {
                    ElMessage({
                        type: 'error',
                        message: '删除失败！',
                    })
                }
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消！',
            })
        })
    }else{
        ElMessage({
            type: 'error',
            message: '您没有住户信息修改权限！！！',
        })
        return
    }
    
}
</script>

<style scoped></style>